<template>
    <div class="message">
        <h2>消息通知</h2>
        <divider></divider>
        <div>
            <div v-for="(item, i) in msgs" :key="item.id" style="border: 1px solid black">
                <h3>{{ i+1 }}</h3>
                <div style="text-align: center">
                <span class="end">{{ item.exchangeobj }}</span>
                <span class="msg">  想用  </span>
                <span class="end">《{{ item.objbook }}》</span>
                <span class="msg">交换您的</span>
                <span class="end">《{{ item.mybook }}》</span>
                </div>
                <div style="text-align: right">
                    <Button type="success" @click="agree(i)">同意</Button>
                    <Button type="error" @click="disagree(i)">拒绝</Button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'message',
    data() {
        return {
            msgs: [],
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            fetch('http://localhost:5000/getMessages', {
                method: 'post',
                body: JSON.stringify({
                    username: localStorage.getItem('userName'),
                }),
                headers: { 'Content-Type': 'application/json' },
            }).then(
                res => res.json()
            ).then(
                res => {
                    let conInfo = res.data
                    let length = res.length
                    for (let i = 0; i < length; i++) {
                        this.msgs.push(conInfo[i])
                    }
                }
            )
        },
        reloadPage() {
            let name = this.$route.name
            let index = this.keepAliveData.indexOf(name)
            this.$nextTick(() => {
                if (this.tagsArry.length) {
                    this.isShowRouter = false
                    this.tagsArry.splice(index, 1)
                    this.$nextTick(() => {
                        this.tagsArry.splice(index, 0, { name, text: this.nameToTitle[name] })
                        this.gotoPage(name)
                        this.isShowRouter = true
                    })
                } else {
                    this.isShowRouter = false
                    this.$nextTick(() => {
                        this.tagsArry.push({ name, text: this.nameToTitle[name] })
                        this.gotoPage(name)
                        this.isShowRouter = true
                    })
                }
            })
        },
        agree(objbook) {
            fetch('http://localhost:5000/agree', {
                method: 'post',
                body: JSON.stringify({
                    username: this.msgs[objbook],
                }),
                headers: { 'Content-Type': 'application/json' },
            }).then(
                alert('交换成功')
            )
            this.reloadPage()
        },
        disagree(objbook) {
            fetch('http://localhost:5000/disagree', {
                method: 'post',
                body: JSON.stringify({
                    username: this.msgs[objbook],
                }),
                headers: { 'Content-Type': 'application/json' },
            }).then(
                alert('已拒绝')
            )
            this.reloadPage()
        },
    },
}
</script>

<style>
.msg {
    font-size: 20px;
    font-weight: bold;
}

.end {
    font-style: italic;
    font-weight: bold;
    font-size: 20px;
}
</style>
